<template>
  <div>
    <el-row  type="flex" >
      <el-col :span="21">
        <basic-container>
          <el-card>
            <div id="myChartWarningLine"  ref="myChartWarning" style="height: 600px;"></div>
          </el-card>
        </basic-container>
      </el-col>
      <el-col :span="3">
        <el-row>
          <basic-container>
            <div class="el-font-size">
              <span><el-tag>预警数据基本信息</el-tag></span>
              <el-divider content-position="left">
                <i class="el-icon-star-off"/>
              </el-divider>

              <span>测点01</span>
              <el-divider direction="vertical"/>
              <el-tag type="info" effect="plain">2000</el-tag>
              <el-divider content-position="left">
                <i class="el-icon-star-off"/>
              </el-divider>

              <span>测点02</span>
              <el-divider direction="vertical"/>
              <el-tag type="info" effect="plain">2000</el-tag>
              <el-divider content-position="left">
                <i class="el-icon-star-off"/>
              </el-divider>

              <span>测点03</span>
              <el-divider direction="vertical"/>
              <el-tag type="info" effect="plain">2000</el-tag>
              <el-divider content-position="left">
                <i class="el-icon-star-off"/>
              </el-divider>

              <span>测点04</span>
              <el-divider direction="vertical"/>
              <el-tag type="info" effect="plain">2000</el-tag>
              <el-divider content-position="left">
                <i class="el-icon-star-off"/>
              </el-divider>

            </div>
          </basic-container>
        </el-row>
      </el-col>
    </el-row>
  </div>

</template>
<script>
  import website from '@/config/website';
  import {info} from "@/api/system/tenant";
  import {getTopUrl} from "@/util/util";
  import {mapGetters} from "vuex";

  export default {
    data() {
      return {
        tenantId:"",
        opinionData:["3", "2", "4", "4", "5"],
        lineOption:{
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['预警数据值']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ["1","2","3","4","5"]
          },
          yAxis: {
            type: 'value'
          },

          series: [{
            name: '预警数据值',
            type: 'line',
            stack: '应力值',
            data: ["3", "2", "4", "4", "5"]
          }]
        }

      }
    },
    watch: {
      lineOption: {
        handler(newVal, oldVal) {
          if (this.myChartWarning) {
            if (newVal) {
              this.myChartWarning.setOption(newVal);
            } else {
              this.myChartWarning.setOption(oldVal);
            }
          } else {
            this.drawWarningLine();
          }
        },
        deep: true //对象内部属性的监听，关键。
      },

    },
    computed: {
      ...mapGetters(["permission","userInfo"]),
    },
    created() {
      this.getTenant();

    },
    mounted(){
      this.drawWarningLine();
      // 非租户模式默认加载管理组数据
      // if (!website.tenantMode) {
      //   this.initData(website.tenantId);
      // }else{
      //   this.initData(this.tenantId);
      // }
    },

    methods: {
      getTenant() {
        let domain = getTopUrl();
        info(domain).then(res => {
          const data = res.data;
          if (data.success && data.data.tenantId) {
            this.tenantId = data.data.tenantId;
            if (!website.tenantMode) {
              this.initData(website.tenantId);
            }else{
              this.initData(this.tenantId);
            }
          }
        })
      },

      drawWarningLine(){
        let myChartWarningLine = this.$echarts.init(document.getElementById('myChartWarningLine'))// 基于准备好的dom，初始化echarts实例
        myChartWarningLine.setOption(this.lineOption,true);// 绘制图表
      },

    }
  };
</script>

<style >

</style>
